/**
 * 全局样式-存储
 *
 **/
import {reactive} from 'vue'
import {defineStore} from 'pinia'
import {Layout} from './interface'

export const useConfig = defineStore(
    'config',
    () => {
        const layout: Layout = reactive({
            /* 全局 */
            menuWidth: 2.6,
            // 是否水平折叠收起菜单
            menuCollapse: false,
            // 是否收缩布局(小屏设备)
            shrink: false,
            layoutMode: 'Default',
            // 显示菜单栏顶栏(LOGO)
            menuShowTopBar: true,

        })
        const lang = reactive({
            // 默认语言，可选值<zh-cn|en>
            defaultLang: 'zh-cn',
            // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
            fallbackLang: 'zh-cn',
            // 支持的语言列表
            langArray: [
                {name: 'zh-cn', value: '中文简体'},
                {name: 'en', value: 'English'},
            ],
        })


        function menuWidth() {
            if (layout.shrink) {
                return layout.menuCollapse ? '0' : layout.menuWidth + 'rem'
            }
            // 菜单是否折叠
            return layout.menuCollapse ? '0.64rem' : layout.menuWidth/100 + 'rem'
        }

        // function setLayoutMode(data: string) {
        //     if (layout.menuCollapse) {
        //         layout.menuCollapse = false
        //     } else {
        //         layout.menuCollapse = true
        //     }
        // }

        const setLayout = (name: keyof Layout, value: any) => {
            layout[name] = value as never
        }

        function setLang(val: string) {
            lang.defaultLang = val
        }

        function setLayoutMode(data: string) {
            layout.layoutMode = data
        }

        return {layout, menuWidth, setLayoutMode, lang, setLang, setLayout}
    },
    {
        persist: {
            enabled: true,
            strategies: [
                {
                    key: 'useConfig',
                    storage: localStorage
                },
            ]
        },
    }
)
